
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <style>
        .preview-suitable-app {
            overflow: visible;
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-border {
            transform-origin: center;
            position: relative;
            border-radius: 30px 30px 30px 30px;
        }
        .app-border::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border: 4px solid rgb(51, 51, 51);
            border-radius: 30px 30px 30px 30px;
        }
        iframe {
            transform-origin: left top;
            border-radius: 26px;
            overflow: hidden;
        }
        .app-border-right {
            position: absolute;
            top: 259px;
            right: -15px;
        }
        .app-border-footer {
            width: 395px;
            height: 38px;
            position: absolute;
            bottom: 8px;
            left: -1px;
            border-radius: 0 0 16px 16px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="preview-suitable-content-app" class="preview-suitable-app">
        <div class="app-border" style="width: 393px;height: 852px;transform:scale(0.9002347417840375);">
            <iframe id="iframe" class="vueIframeApp" style="border:none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const html = "<html lang='zh-CN'>\n        <head >\n        <meta charset='utf-8'/>\n<meta content='width=device-width, initial-scale=1.0' name='viewport'/>\n<title >聊天界面</title>\n<script src='https://res.gemcoder.com/js/reload.js'><\/script>\n<script src='https://cdn.tailwindcss.com'><\/script>\n<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>\n<script >tailwind.config = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#4F46E5',\n        // 主色调：紫色\n        secondary: '#3B82F6',\n        // 辅助色：蓝色\n        neutral: {\n          100: '#F3F4F6',\n          200: '#E5E7EB',\n          300: '#D1D5DB',\n          600: '#4B5563',\n          700: '#374151',\n          800: '#1F2937'\n        }\n      },\n      fontFamily: {\n        sans: ['Inter', 'system-ui', 'sans-serif']\n      }\n    }\n  }\n};<\/script>\n<style type='text/tailwindcss'>\n        @layer utilities {\n            .content-auto {\n                content-visibility: auto;\n            }\n            .scrollbar-hide {\n                -ms-overflow-style: none;\n                scrollbar-width: none;\n            }\n            .scrollbar-hide::-webkit-scrollbar {\n                display: none;\n            }\n            .text-shadow {\n                text-shadow: 0 1px 2px rgba(0,0,0,0.1);\n            }\n            .bg-gradient-primary {\n                background: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%);\n            }\n        }\n    </style>\n    \n        <style>\n            ::-webkit-scrollbar { width: 0px; }\n        </style>\n    </head>\n<body class='bg-white font-sans text-neutral-800 min-h-screen'>\n        <!-- 顶部导航栏 -->\n<header class='sticky top-0 z-50 bg-white shadow-sm'>\n        <div class='flex items-center justify-between px-4 py-3'>\n        <!-- 左侧用户信息 -->\n<div class='flex items-center space-x-3'>\n        <div class='w-10 h-10 rounded-full overflow-hidden border-2 border-primary'>\n        <img alt='用户头像' class='w-full h-full object-cover' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/0c0d63700247c3aea3d6dc3b7a4ff1c7.png'/>\n    </div>\n<div >\n        <h1 class='text-lg font-bold text-neutral-800' data-yteditvalue='用户'>\n        用户\n    </h1>\n<p class='text-xs text-neutral-600'>\n        在线 · 已认证\n    </p>\n    </div>\n    </div>\n<!-- 右侧福利中心 -->\n<div class='flex items-center space-x-1 text-primary'>\n        <i class='fas fa-gift text-sm'>\n        </i>\n<span class='text-xs font-medium'>\n        福利中心\n    </span>\n    </div>\n    </div>\n<!-- VIP横幅 -->\n<div class='bg-gradient-primary text-white px-4 py-2 flex items-center justify-between'>\n        <div class='flex items-center space-x-2'>\n        <i class='fas fa-crown'>\n        </i>\n<span class='text-sm font-medium'>\n        开通VIP，享高阶权益\n    </span>\n    </div>\n<button class='text-xs bg-white text-primary px-2 py-1 rounded-full font-medium'>\n        立即开通\n    </button>\n    </div>\n    </header>\n<!-- 选项卡区域 -->\n<div class='bg-white border-b border-neutral-200'>\n        <div class='flex justify-around' data-ytextravalue='extra-3zuxv2n2x'>\n        <button class='w-1/3 py-3 flex flex-col items-center border-b-2 text-neutral-600' data-ytindex='0' data-ytoriginindex='2' data-ytparentvalue='extra-3zuxv2n2x' style='opacity: 1; color: rgb(75, 85, 99); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: center; text-indent: 0px;'>\n        <i class='fas fa-history text-lg mb-1' data-selectorname='i' style>\n        </i>\n<span class='text-xs font-medium' style>\n        对话历史\n    </span>\n    </button>\n<button class='w-1/3 py-3 flex flex-col items-center text-secondary border-b-2 border-secondary' data-ytindex='1' data-ytoriginindex='0' data-ytparentvalue='extra-3zuxv2n2x' style='opacity: 1; color: rgb(59, 130, 246); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: center; text-indent: 0px; position: relative; left: 0px;'>\n        <i class='fas fa-file-code text-lg mb-1 text-secondary' data-selectorname='i' data-ytindex='0' data-ytoriginindex='0' style>\n        </i>\n<span class='text-xs font-medium' style>\n        我的作品\n    </span>\n    </button>\n<button class='w-1/3 py-3 flex flex-col items-center text-neutral-600' data-ytextravalue='extra-wvo8dwn91' data-ytindex='2' data-ytoriginindex='1'>\n        <i class='fas fa-robot text-lg mb-1' data-ytindex='0' data-ytoriginindex='0'>\n        </i>\n<span class='text-xs font-medium' data-ytindex='2' data-ytoriginindex='2'>\n        我的智能体\n    </span>\n    </button>\n    </div>\n    </div>\n<!-- 主内容区域 -->\n<main class='p-4 pb-20'>\n        <!-- 对话历史列表 -->\n<div class='space-y-6'>\n        <!-- 对话项 3 -->\n<div class='bg-neutral-100 rounded-xl p-4 shadow-sm'>\n        <div class='flex items-center justify-between mb-3'>\n        <div class='flex items-center space-x-2'>\n        <div class='w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs'>\n        <i class='fas fa-user'>\n        </i>\n    </div>\n<span class='text-xs font-medium text-neutral-700'>\n        我\n    </span>\n    </div>\n<div class='flex items-center space-x-3'>\n        <span class='text-xs text-neutral-500'>\n        今天 14:32\n    </span>\n<button class='text-neutral-400 hover:text-primary edit-btn text-xs'>\n        <i class='fas fa-pencil-alt'>\n        </i>\n    </button>\n    </div>\n    </div>\n<div class='text-sm text-neutral-800 font-mono bg-white p-3 rounded-lg overflow-x-auto scrollbar-hide' data-yteditvalue='对话历史'>\n        PS C:\\Users\\HeZhan\\Desktop\\universal-admin-system-class2-group4\n>\ngit pull\n    </div>\n    </div>\n<!-- 对话项 4 -->\n<div class='bg-neutral-100 rounded-xl p-4 shadow-sm'>\n        <div class='flex items-center justify-between mb-3'>\n        <div class='flex items-center space-x-2'>\n        <div class='w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs'>\n        <i class='fas fa-user'>\n        </i>\n    </div>\n<span class='text-xs font-medium text-neutral-700'>\n        我\n    </span>\n    </div>\n<div class='flex items-center space-x-3'>\n        <span class='text-xs text-neutral-500'>\n        今天 14:35\n    </span>\n<button class='text-neutral-400 hover:text-primary edit-btn text-xs'>\n        <i class='fas fa-pencil-alt'>\n        </i>\n    </button>\n    </div>\n    </div>\n<div class='text-sm text-neutral-800 font-mono bg-white p-3 rounded-lg overflow-x-auto scrollbar-hide' data-yteditvalue='对话历史'>\n        PS C:\\Users\\HeZhan\\Desktop\\universal-admin-system-class2-group4\n>\nnpm install\n    </div>\n    </div>\n<!-- 对话项 5 -->\n<div class='bg-neutral-100 rounded-xl p-4 shadow-sm'>\n        <div class='flex items-center justify-between mb-3'>\n        <div class='flex items-center space-x-2'>\n        <div class='w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs'>\n        <i class='fas fa-user'>\n        </i>\n    </div>\n<span class='text-xs font-medium text-neutral-700'>\n        我\n    </span>\n    </div>\n<span class='text-xs text-neutral-500'>\n        今天 14:35\n    </span>\n    </div>\n<div class='text-sm text-neutral-800 font-mono bg-white p-3 rounded-lg overflow-x-auto scrollbar-hide' data-yteditvalue='对话历史'>\n        PS C:\\Users\\HeZhan\\Desktop\\universal-admin-system-class2-group4\n>\nnpm run dev\n    </div>\n    </div>\n<!-- 对话项 6 -->\n<div class='bg-neutral-100 rounded-xl p-4 shadow-sm'>\n        <div class='flex items-center justify-between mb-3'>\n        <div class='flex items-center space-x-2'>\n        <div class='w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs'>\n        <i class='fas fa-user'>\n        </i>\n    </div>\n<span class='text-xs font-medium text-neutral-700'>\n        我\n    </span>\n    </div>\n<div class='flex items-center space-x-3'>\n        <span class='text-xs text-neutral-500'>\n        今天 15:10\n    </span>\n<button class='text-neutral-400 hover:text-primary edit-btn text-xs'>\n        <i class='fas fa-pencil-alt'>\n        </i>\n    </button>\n    </div>\n    </div>\n<div class='text-sm text-neutral-800 font-mono bg-white p-3 rounded-lg overflow-x-auto scrollbar-hide' data-yteditvalue='对话历史'>\n        PS C:\\Users\\HeZhan\\Desktop\\universal-admin-system-class2-group4\n>\ngit add .\n    </div>\n    </div>\n<!-- 对话项 7 -->\n<div class='bg-neutral-100 rounded-xl p-4 shadow-sm'>\n        <div class='flex items-center justify-between mb-3'>\n        <div class='flex items-center space-x-2'>\n        <div class='w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs'>\n        <i class='fas fa-user'>\n        </i>\n    </div>\n<span class='text-xs font-medium text-neutral-700'>\n        我\n    </span>\n    </div>\n<div class='flex items-center space-x-3'>\n        <span class='text-xs text-neutral-500'>\n        今天 15:12\n    </span>\n<button class='text-neutral-400 hover:text-primary edit-btn text-xs'>\n        <i class='fas fa-pencil-alt'>\n        </i>\n    </button>\n    </div>\n    </div>\n<div class='text-sm text-neutral-800 font-mono bg-white p-3 rounded-lg overflow-x-auto scrollbar-hide' data-yteditvalue='对话历史'>\n        PS C:\\Users\\HeZhan\\Desktop\\universal-admin-system-class2-group4\n>\ngit commit -m \"fix: 修复登录页样式问题\"\n    </div>\n    </div>\n    </div>\n    </main>\n<script >// 页面加载时初始化\ndocument.addEventListener('DOMContentLoaded', function () {\n  // 选项卡切换功能\n  var tabs = document.querySelectorAll('div.border-b button');\n  tabs.forEach(function (tab) {\n    tab.addEventListener('click', function () {\n      // 移除所有选项卡的选中状态\n      tabs.forEach(function (t) {\n        t.classList.remove('text-secondary', 'border-secondary');\n        t.classList.add('text-neutral-600');\n        t.querySelector('i').classList.remove('text-secondary');\n      });\n\n      // 设置当前选项卡为选中状态\n      tab.classList.remove('text-neutral-600');\n      tab.classList.add('text-secondary', 'border-b-2', 'border-secondary');\n      tab.querySelector('i').classList.add('text-secondary');\n    });\n  });\n  // 文本区域自动调整高度\n  var textarea = document.querySelector('textarea');\n  if (textarea) {\n    textarea.addEventListener('input', function () {\n      // 重置高度以正确计算滚动高度\n      textarea.style.height = 'auto';\n      // 设置新高度，限制最大高度\n      var newHeight = Math.min(textarea.scrollHeight, 100);\n      textarea.style.height = \"\".concat(newHeight, \"px\");\n    });\n  }\n\n  // 编辑功能\n  document.querySelectorAll('.edit-btn').forEach(function (btn) {\n    btn.addEventListener('click', function () {\n      var messageDiv = this.closest('div.flex.items-center.justify-between.mb-3').nextElementSibling;\n      var originalText = messageDiv.textContent.trim();\n      var isCodeBlock = messageDiv.classList.contains('font-mono');\n\n      // 创建编辑框\n      var editTextarea = document.createElement('textarea');\n      editTextarea.className = \"w-full p-3 rounded-lg text-sm \".concat(isCodeBlock ? 'font-mono bg-white' : '');\n      editTextarea.value = originalText;\n      editTextarea.style.height = '80px';\n\n      // 保存原始内容\n      var originalContent = messageDiv.innerHTML;\n\n      // 替换为编辑框\n      messageDiv.innerHTML = '';\n      messageDiv.appendChild(editTextarea);\n\n      // 聚焦编辑框\n      editTextarea.focus();\n\n      // 创建保存和取消按钮\n      var buttonGroup = document.createElement('div');\n      buttonGroup.className = 'flex justify-end space-x-2 mt-2';\n      var saveBtn = document.createElement('button');\n      saveBtn.className = 'px-3 py-1 bg-primary text-white text-xs rounded font-medium';\n      saveBtn.innerHTML = \"<i class=\\\"fas fa-save mr-1\\\" data-ytId=\\\"id-74yeo\\\" data-ytId=\\\"id-wtq4o\\\" data-ytId=\\\"id-2gg8y\\\" data-ytId=\\\"id-6fjiw\\\" data-ytId=\\\"id-7mutn\\\" data-ytId=\\\"id-spcot\\\" data-ytId=\\\"id-3ivnm\\\" data-ytId=\\\"id-w25pp\\\"></i>\\u4FDD\\u5B58\";\n      var cancelBtn = document.createElement('button');\n      cancelBtn.className = 'px-3 py-1 bg-neutral-200 text-neutral-700 text-xs rounded font-medium';\n      cancelBtn.innerHTML = \"<i class=\\\"fas fa-times mr-1\\\" data-ytId=\\\"id-2wvis\\\" data-ytId=\\\"id-meo0e\\\" data-ytId=\\\"id-y98xu\\\" data-ytId=\\\"id-35iyc\\\" data-ytId=\\\"id-knux5\\\" data-ytId=\\\"id-edzas\\\" data-ytId=\\\"id-zh8h1\\\" data-ytId=\\\"id-thizy\\\"></i>\\u53D6\\u6D88\";\n      buttonGroup.appendChild(saveBtn);\n      buttonGroup.appendChild(cancelBtn);\n      messageDiv.appendChild(buttonGroup);\n\n      // 保存按钮事件\n      saveBtn.addEventListener('click', function () {\n        var newText = editTextarea.value.trim();\n        if (isCodeBlock) {\n          messageDiv.innerHTML = \"<pre class=\\\"whitespace-pre-wrap\\\">\".concat(newText, \"</pre>\");\n        } else {\n          messageDiv.textContent = newText;\n        }\n        messageDiv.dataset.yteditvalue = newText;\n      });\n\n      // 取消按钮事件\n      cancelBtn.addEventListener('click', function () {\n        messageDiv.innerHTML = originalContent;\n      });\n    });\n  });\n  // 消息发送功能\n  var sendButton = document.querySelector('footer button:last-child');\n  sendButton.addEventListener('click', sendMessage);\n\n  // 回车发送消息\n  textarea.addEventListener('keydown', function (e) {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      sendMessage();\n    }\n  });\n  // 发送消息函数\n  function sendMessage() {\n    var message = textarea.value.trim();\n    if (message) {\n      // 这里可以添加发送消息的逻辑\n      console.log('发送消息:', message);\n\n      // 清空输入框\n      textarea.value = '';\n      textarea.style.height = 'auto';\n\n      // 简单模拟消息发送成功的反馈\n      var mainContent = document.querySelector('main .space-y-6');\n      var newMessage = document.createElement('div');\n      newMessage.className = 'bg-neutral-100 rounded-xl p-4 shadow-sm animate-fadeIn';\n      var now = new Date();\n      var timeString = \"\".concat(now.getHours(), \":\").concat(now.getMinutes().toString().padStart(2, '0'));\n      newMessage.innerHTML = \"\\n                        <div class=\\\"flex items-center justify-between mb-3\\\" data-ytId=\\\"id-ojoj4\\\" data-ytId=\\\"id-4iq39\\\" data-ytId=\\\"id-zyu97\\\" data-ytId=\\\"id-ajy3p\\\" data-ytId=\\\"id-6a5gz\\\" data-ytId=\\\"id-825on\\\" data-ytId=\\\"id-iaywv\\\" data-ytId=\\\"id-jv815\\\" data-ytId=\\\"id-ww8sm\\\">\\n                            <div class=\\\"flex items-center space-x-2\\\" data-ytId=\\\"id-itq2d\\\" data-ytId=\\\"id-y1qgu\\\" data-ytId=\\\"id-gul7o\\\" data-ytId=\\\"id-po1m4\\\" data-ytId=\\\"id-6zgj6\\\" data-ytId=\\\"id-r9836\\\" data-ytId=\\\"id-fy7mn\\\" data-ytId=\\\"id-fq2uv\\\" data-ytId=\\\"id-6gykc\\\">\\n                                <div class=\\\"w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs\\\" data-ytId=\\\"id-n298b\\\" data-ytId=\\\"id-4fe1c\\\" data-ytId=\\\"id-a54m2\\\" data-ytId=\\\"id-4vf6l\\\" data-ytId=\\\"id-ygn1g\\\" data-ytId=\\\"id-96858\\\" data-ytId=\\\"id-iddem\\\" data-ytId=\\\"id-dlhez\\\" data-ytId=\\\"id-8vkni\\\">\\n                                    <i class=\\\"fas fa-user\\\" data-ytId=\\\"id-jfw7z\\\" data-ytId=\\\"id-n6cmu\\\" data-ytId=\\\"id-r5zwd\\\" data-ytId=\\\"id-0ak1j\\\" data-ytId=\\\"id-si8ma\\\" data-ytId=\\\"id-r10wq\\\" data-ytId=\\\"id-nsh5e\\\" data-ytId=\\\"id-s5loy\\\" data-ytId=\\\"id-f3p91\\\"></i>\\n                                </div>\\n                                <span class=\\\"text-xs font-medium text-neutral-700\\\" data-ytId=\\\"id-d7t06\\\" data-ytId=\\\"id-e81du\\\" data-ytId=\\\"id-wbsr8\\\" data-ytId=\\\"id-70bam\\\" data-ytId=\\\"id-k9ln7\\\" data-ytId=\\\"id-oveoa\\\" data-ytId=\\\"id-z6b7d\\\" data-ytId=\\\"id-h0fir\\\" data-ytId=\\\"id-2g0aa\\\">\\u6211</span>\\n                            </div>\\n                            <span class=\\\"text-xs text-neutral-500\\\">\\u4ECA\\u5929 \".concat(timeString, \"</span>\\n                        </div>\\n                        <div class=\\\"text-sm text-neutral-800\\\">\").concat(message, \"</div>\\n                    \");\n      mainContent.appendChild(newMessage);\n\n      // 滚动到底部\n      mainContent.scrollTop = mainContent.scrollHeight;\n    }\n  }\n});<\/script>\n    </body>\n    </html>";
        iframe.srcdoc = html;
    });
</script>
</html>
